<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix" style="text-align:center">
            <span>请假审批</span>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="申请时间" align="center">
              <template slot-scope="scope">{{ scope.row.createtime }}</template>
            </el-table-column>
            <el-table-column prop="u_id" label="申请人学号" align="center">
            </el-table-column>
            <el-table-column prop="username" label="申请人" align="center">
            </el-table-column>
            <el-table-column prop="leavetype" label="类型" align="center"></el-table-column>
            <el-table-column prop="reason" label="具体内容" align="center" min-width='200px'></el-table-column>
            <el-table-column prop="state" label="审核结果" align="center" min-width='130px'>
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.state==0">{{ scope.row.state | stateFilter}}</el-tag>
                <el-tag type="warning" v-else-if="scope.row.state==1">{{ scope.row.state | stateFilter}}</el-tag>
                <el-tag type="success" v-else>{{ scope.row.state | stateFilter}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="审核人ID" align="center" min-width='200px'>
              <template slot-scope="scope">
                 <span>{{scope.row.t_id ? scope.row.t_id : '暂无审核'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="t_name" label="审核人用户名" align="center" min-width='200px'>
              <template slot-scope="scope">
                 <span>{{scope.row.t_name ? scope.row.t_name : '暂无审核'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width='150px'>
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="success"
                  @click="Approval(scope.$index, scope.row, 2)"
                  v-if="scope.row.state == 0"
                >同意</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="Approval(scope.$index, scope.row, 1)"
                  v-if="scope.row.state == 0"
                >拒绝</el-button>
                <el-tag type="info" v-if="scope.row.state != 0">
                  已操作 
                </el-tag>
                
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="text-align:center;margin-top:20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20,25]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UserSize"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { upLeaveState, getLeave} from '../../api/teacher-api/leaveApproval'
export default {
  data() {
    return {
      UserSize: 0,
      currentPage: 12,
      tableData: [],
      pageSize: 5,
      pageNo: 1,
      currentPage1: 10,
    };
  },
  created() {
    this.getApplication(this.pageNo, this.pageSize);
  },
  filters: {
    stateFilter(int) {
      if (int == 0) {
        return "未审批";
      }
      if (int == 1) {
        return "审批不通过";
      }
      if (int == 2) {
        return "审批通过";
      }
    },
  },
  methods: {
    // 请假申请审批
    Approval(index, row, upState) {
      upLeaveState(row.l_id, upState).then(res => {
        this.getApplication(this.pageNo, this.pageSize);
        this.$message({
          type: 'success',
          message: res.data.results
        })
      }).catch(err => {
        this.$message({
          type: 'error',
          message: res.data.results
        })
      })
    },
    
    // 获取请假单
    getApplication(pageNo, pageSize) {
      getLeave(pageNo, pageSize).then(res => {
          this.tableData = res.data.data;
          this.UserSize = res.data.total;
      })
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getApplication(this.pageNo, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getApplication(this.pageNo, this.pageSize);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
